/*
 * @Description: 首页没有下拉时的页面，包含了云卡的露出和生活模块
 * @Author: tao.xie
 * @Date: 2019-06-11 10:34:54
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-06-14 15:56:31
 */
<template>
  <div style="background:#f2f5f6">
    <!-- 首页默认标题栏 -->
    <home-title-bar
      ref="title"
      :showSlideHint="showSlideHint"
      :style="{opacity:homeTitleBarOpacity,'z-index':homeTitleBarZIndex}"
    />
    <!-- 首页下拉时出现的标题栏 -->
    <bus-card-title-bar
      :style="{opacity:busCardTitleBarOpacity,'z-index':busCardTitleBarZIndex}"
      class="bus-card-title-bar"
    />
    <!-- 内容容器 -->
    <div>
      <!-- 云卡卡面 -->
      <div
        class="flex-v flex-vc"
        :style="{'margin-top':cardMarginTop/75+'rem'}"
      >
        <bus-card-face
          ref="face"
          @login="_pushToLogin"
          @pulldown="_pushToBusCard"
        />
      </div>

      <!-- 生活模块组件 -->
      <transition
        :name="transitionName"
        v-on:after-leave="afterLeave"
      >
        <!-- better-scroll容器 -->
        <div
          id="better-scroll"
          class="better-scroll-wapper"
          ref="betterScrollWrapper"
          v-show="cityLifeShow"
          :style="{ opacity:cityLifeOpacity,height: wrapperHeight + 'px' ,'margin-top':'-'+cardFaceHiddenPX/75+'rem'}"
        >
          <!-- 生活组件 -->
          <city-life />
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { CityLife, HomeTitleBar, BusCardTitleBar, BusCardFace } from '../components'
import { NOT_LOGIN } from '../api/api'
import { goLogin } from 'vue-xiaobu-utils'
// import { isUserLogin } from '@/utils/UserBeanUtils'
const CARD_FACE_MAX_MARGIN_TOP = 20// 卡面视差滚动最大外边距,px单位
const CARD_FACE_HIDDEN_PX = 240// 卡面遮挡高度,px单位
const PULL_THRESHOLD = 100// 拖动阈值,px单位
const CITY_LIFE_MIN_OPACITY = 0.7// 生活模块下拉最小透明度
export default {
  components: {
    CityLife,
    HomeTitleBar,
    BusCardTitleBar,
    BusCardFace
  },
  data() {
    return {
      clientHeight: 0, // 页面可是区域的高度
      wrapperHeight: 0, // 整体阻尼容器高度
      downScroll: null, // 下拉阻尼-第二屏
      downScrollLoad: false, // 下拉阻尼-达到阈值标志位
      pullThreshold: 0, // 拖动阈值，默认70px,
      cardMarginTop: 0, // 云卡卡面的外边距，做视差处理
      homeTitleBarOpacity: 1, // 首页默认头透明度
      busCardTitleBarOpacity: 0, // 首页下拉时出现的头的透明度
      cityLifeOpacity: 1, // 生活模块透明度
      cityLifeShow: true, // 生活模块是否显示
      transitionName: '', // 生活模块过度动画效果类名
      scale: 1, // 缩放尺寸
      cardFaceHiddenPX: CARD_FACE_HIDDEN_PX, // 卡面遮挡高度
      homeTitleBarZIndex: 999, // 首页标题栏的zindx默认值
      busCardTitleBarZIndex: -1, // 首页下拉出来的公交标题栏默认值,
      // willLeave: false, // 是否将要下拉离开当前页面
      showSlideHint: false // 首页的下拉提示语
    }
  },
  watch: {
    cardMarginTop() {
      this.wrapperHeight = this.clientHeight - this.$refs.title.$el.offsetHeight - this.$refs.face.$el.offsetHeight - this.cardMarginTop + CARD_FACE_HIDDEN_PX * this.scale
    }
  },
  mounted() {
    this.clientHeight = document.documentElement.clientHeight
    // 计算尺寸缩放，330为卡面的设置高度px
    this.scale = (this.$refs.face.$el.offsetHeight / 330)
    this.wrapperHeight = this.clientHeight - this.$refs.title.$el.offsetHeight - this.$refs.face.$el.offsetHeight - this.cardMarginTop + CARD_FACE_HIDDEN_PX * this.scale
    this.pullThreshold = PULL_THRESHOLD * this.scale
    this.initCityLifeScroll()
    // this.injectOnBackMethod()
    // this.injectResumeMethod()
    // 声明全局函数，用于底层添加全屏幕的蒙层引导图，给予指定的top值
    window.getTargetMaskClientTop = () => {
      return document.getElementById('better-scroll').getBoundingClientRect().top
    }
    this.$EventBus.$on('showSlideHint', needShow => {
      this.showSlideHint = needShow
    })
  },
  activated() {
    this.wrapperHeight = this.clientHeight - this.$refs.title.$el.offsetHeight - this.$refs.face.$el.offsetHeight - this.cardMarginTop + CARD_FACE_HIDDEN_PX * this.scale
    this.resetData()
  },
  deactivated() {
    // 当卸载组件时，设置动画效果为空，以便返回时不启用动画效果
    this.transitionName = ''
  },

  methods: {
    // 初始化下拉阻尼
    initCityLifeScroll() {
      this.downScroll = new BScroll(this.$refs.betterScrollWrapper, {
        probeType: 2,
        click: true,
        scrollX: true,
        eventPassthrough: 'horizontal'
      })
      this.downScroll.on('scroll', (pos) => {
        let percent = 0
        // 向下拖动达到阈值
        if (pos.y >= this.pullThreshold) {
          this.downScrollLoad = true
          percent = 1
        } else {
          this.downScrollLoad = false
          percent = pos.y >= 0 ? pos.y / this.pullThreshold : 0
        }
        // 需要设置两个标题栏的zindex都为0，不然后面的标题栏会被挡住，不会出现淡出淡入的动画
        this.homeTitleBarZIndex = 0
        this.busCardTitleBarZIndex = 0
        // 设置需要做动画效果组件的透明度及卡面的视差效果
        this.cardMarginTop = percent * CARD_FACE_MAX_MARGIN_TOP
        this.busCardTitleBarOpacity = percent
        this.homeTitleBarOpacity = 1 - percent
        this.cityLifeOpacity = (1 - percent) < CITY_LIFE_MIN_OPACITY ? CITY_LIFE_MIN_OPACITY : (1 - percent)
      })
      // 手指释放位检
      this.downScroll.on('touchEnd', () => {
        if (this.downScrollLoad === true) {
          // 手动设置过度的动画效果类名
          this.transitionName = 'slide-fade'
          this.cityLifeShow = false
        } else {
          this.resetData()
        }
      })
    },
    // 生活模块动画结束的钩子函数
    afterLeave() {
      let state = this.$store.getters.cardState
      if (state === NOT_LOGIN) {
        // this.willLeave = true
        this._pushToLogin()
      } else {
        this._pushToBusCard()
      }
    },
    // 重置内部属性函数
    resetData() {
      if (this.downScroll) {
        this.downScroll.refresh()
      }
      this.downScrollLoad = false
      this.cardMarginTop = 0
      this.cityLifeOpacity = 1
      this.homeTitleBarOpacity = 1
      this.busCardTitleBarOpacity = 0
      this.cityLifeShow = true
      this.homeTitleBarZIndex = 999
      this.busCardTitleBarZIndex = -1
      // this.willLeave = false
      // 显示底部tabbar
      this.$UI.then(UI => {
        UI.changeTabbarDisplayStatus(true, () => { }, () => { })
      })
    },
    _pushToLogin() {
      goLogin()
      this.resetData()
    },
    _pushToBusCard() {
      // 隐藏底部tabbar
      this.$UI.then(UI => {
        UI.changeTabbarDisplayStatus(false, () => { }, () => { })
      })
      this.$router.push({ path: '/buscard' })
    }
    // injectOnBackMethod() {
    //   window.onBack = (msg) => {
    //     // 当登陆成功且是下拉唤起的登陆页面时，登陆成功后立即加载云公交卡的页面
    //     if (msg.indexOf('loginsuccess') && this.willLeave) {
    //       // this.willLeave = false
    //       // this._pushToBusCard()
    //       // this.resetData()
    //     }
    //   }
    // },
    // injectResumeMethod() {
    //   document.addEventListener('resume', () => {
    //     if (this.willLeave && !isUserLogin()) {
    //       this.resetData()
    //     }
    //   })
    // }
  }
}
</script>

<style scoped>
/* 首页下拉时出现的标题栏 */
.bus-card-title-bar {
  position: absolute;
  top: 0px;
  left: 0px;
}
/* better-scroll容器 */
.better-scroll-wapper {
  overflow-y: hidden;
}
.better-scroll-wapper > div:first-of-type {
  position: relative;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.2s linear;
}
.slide-fade-leave-active {
  transition: all 0.2s linear;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(100%);
}
</style>
